/*original modif:http://www.fullblogdesign.com*/
a.tooltip {
        position: relative;
        text-decoration: none;
    }
    a.tooltip::before {
        position: absolute;
        content: attr(data-title);
        background: #fff;
        width: 250px;
        color: #000;
         opacity:0;
        left: 500px;
        text-align: justify;
        z-index: 99;
        transition: all 0.5s linear;
        border-left: 5px solid olive;
        visibility: hidden;
        font: normal 12px/20px Arial,sans-serif;
    }
    a.tooltip:hover::before {
        text-align:center;
        left: 75px;
        visibility: visible;
        opacity:1;  
    }
a.tooltipz {
        position: relative;
        text-decoration: none;
    }
    a.tooltipz::before {
        position: absolute;
        content: attr(title);
        background: #000;
        width: 150px;
        color: orange;
         opacity:0;
        left: -200px;
        text-align: justify;
        z-index: 99;
        transition: all 0.5s linear;
        border-left: 5px solid red;
        visibility: hidden;
        font: normal 12px/20px Arial,sans-serif;
    }
    a.tooltipz:hover::before {
        text-align:center;
        left: 75px;
        visibility: visible;
        opacity:1;  
    }